<template>
  <div class="footer">
    <div class="tab" v-for="(item, i) in iconlist" :key="i" @click="changehomenum(i)">
      <router-link :to="item[3]">
        <div class="box">
      <i
        :class="['iconfont', item[1]]"
        v-if="homenum == i ? '1' : 0"
        style="color:rgb(81,144,255)"
      ></i>
      <i :class="['iconfont', item[0]]" v-else></i>
      <span>{{ item[2] }}</span>
      </div>
      </router-link>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import {mapState} from 'vuex'

export default {
  components: {},
  computed: {
    ...mapState({
      homenum:state=>state.home.homenum
    })
  },
  data() {
    return {
      iconlist: [
        ["icon-shouye", "icon-shouye1", "首页",'/'],
        ["icon-daijiedan1", "icon-daijiedan",'接单','/order'],
        ["icon-dingdan1", "icon-dingdan",'订单','/shoppingcar'],
        ["icon-huodong", "icon-huodong1",'活动',''],
        ["icon-wode", "icon-wodedamaijihuo",'我的','/personal'],
      ],
    };
  },
 methods: {
    changehomenum(i) {
      this.$store.commit('home/changehomenum',i)
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped src="../assets/css/footer.css">
</style>